<template>
  <div class="device-group">
    <!-- 设备 -->
    <ContentTitle :info="info" />
    <!-- 设备 -->
    <el-card class="box-card mt-10">
      <div class="card-header flex jc-sb aic">
        <li class="flex item aic">
          <span>群组名称：</span>
          <el-input v-model="input" placeholder="群组名称" />
          <button @click="search" class="but bg-blue fff">搜索</button>
          <p>
            <span>搜索结果</span>
            <span>{{total}}</span>
          </p>
        </li>
        <el-button type="text" class="f16" @click="open">新增</el-button>
      </div>
    </el-card>
    <FormList ref="formList" />
    <!-- 弹出窗 --> 
  </div>
</template>

<script setup>
import { ref } from "vue";
import * as api from "@/api/index";
import ContentTitle from "@/components/ContentTitle.vue";
import FormList from "../device/group/FormList.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const info = ref({
  type: "设备",
  text: "节点群组",
  msg: "以分组的形式管理节点设备,提供了搜索、添加新的群组、重命名、移动设备等功能。",
});

//搜索
const input = ref("");
const total = ref();
const search =() =>{
  let data ={
    currPage: formList.value.currPage,
    pageSize: formList.value.pageSize,
    keyword:input.value,
  }
  api.$groupList(data).then((res) => {
    formList.value.tableData = res.data;
    formList.value.total = res.total;
    total.value = res.total;
  });
}
/**
 * 增加
 */
//获取实例
const formList = ref();
const open = () => {
  ElMessageBox.prompt("", "新增群组", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputPlaceholder: "群组名称",
  }).then(({ value }) => {
    let data = {
      groupName: value,
    };
    if (value) {
      api.$groupAdd(data).then((res) => {
        formList.value.tableData.unshift(res.data);
        formList.value.changePage();
        ElMessage({
          type: "success",
          message: "新增成功",
        });
      });
    }
  });
};
</script>

<style lang="less">
.device-group {
  .item {
    .but {
      border: none;
      width: 40px;
      height: 30px;
      border-radius: 3px;
      margin: 0 20px;
    }
    .el-input {
      width: 80px;
    }
  }
}
</style>